<script>
export default {
  data(){
    return{
      num: 0,
      uname: "张三",
      msg: "<h1>我是王五</h1>",
      id_test: "id_test_1",
      url: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAZtraG.img?h=1080&w=1920&m=6&q=60&o=f&l=f",
      message: "123456",
      attributeName: "id",
      mouseEvent: "click"
    };
  },
  methods:{
      changeUname(){
          //this指向这个Vue实例
          this.uname = '李四';
      },
      changeColor(){
        this.id_test = "id_test_2";
      }
  }
}
</script>

<template>
  <div>
    <img v-bind:src="url" alt="">
      <p>{{num}}</p>

      <p>{{uname}}</p>
      <p v-once>{{uname}}</p>
      <button @click="changeUname">改变名字</button>
      <p v-html="msg"></p>
      <p v-html="msg"></p>
      <p v-bind:id="id_test">1234124</p>
      <!-- v-bind语法糖 -->
      <p :id="id_test">1234124</p>
      <!-- 使用 JavaScript 表达式 -->
      <p>{{ message.split('').reverse().join('') }}</p>
      <button v-on:click="changeColor">改变颜色-1</button>
      <!-- v-on语法糖,v-on用于监听DOM事件 -->
      <button @click="changeColor">改变颜色-1</button>
      <button @click="id_test='id_test_2'">改变颜色-2</button>
      <!-- 动态属性 -->
      <p v-bind:[attributeName]="id_test">v-bind绑定</p>
      <button @click="attributeName='class'">改变属性</button>
      <!-- attributeName原本是id，现在赋值为class，上面那行就是class="id_test"，是一个参数，值为id_test_1，class=id_test_1走的时候类选择器 -->
      <!-- 动态事件 -->
      <button @[mouseEvent]="attributeName='class'">改变属性</button>
      <button @click="mouseEvent='mouseover'">改变属性</button>
      

  </div>
</template>

<style> 
    #id_test_1{
        color: red;
    }
    #id_test_2{
        color: blue;
    }
    .id_test_1{
      font-size: 50px;
    }

</style>
